<template>
	<view class="car-content">
		<view class="top-tips">
			注：请填写真实有效的二手车信息
		</view>
		<view class="release-body">
			<u-field v-model="queryForm.title" label="车辆名称" placeholder="请填写" input-align='right'>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field>
			<u-field v-model="queryForm.areaList" label="所在区域" placeholder="请选择" input-align='right'
				@click.stop="showSelect('addressShow')" disabled>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field>
			<u-picker mode="region" v-model="addressShow" @confirm="addressConfirm"></u-picker>
			<u-field v-model="queryForm.address" label="详细地址" placeholder="请填写详细地址" input-align='right'>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field>
			<!-- <u-field v-model="mobile" label="归属车系" placeholder="请输入归属车系" input-align='right' @click.stop="test"
				disabled>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field> -->
			<!-- 	<u-field v-model="mobile" label="变速箱" placeholder="请输入变速箱属性" input-align='right' @click.stop="test"
				disabled>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field> -->
			<u-field v-model="queryForm.car_age" label="车龄" placeholder="请输入车龄" input-align='right'>
				<view slot='right'>
					<view style="display: flex;align-items: center;">
						<view style="margin-right: 10rpx;">月</view>
						<image class="right-img" src="../../static/image/right.png" mode=""></image>
					</view>
				</view>
			</u-field>
			<!-- <u-field v-model="mobile" label="行驶里程" placeholder="请输入公里数" input-align='right'>
				<view slot='right'>
					<view style="display: flex;align-items: center;">
						<view style="margin-right: 10rpx;">公里</view>
						<image class="right-img" src="../../static/image/right.png" mode=""></image>
					</view>
				</view>
			</u-field> -->
			<!-- <u-field v-model="mobile" label="车辆排量" placeholder="请输入车辆排量" input-align='right' @click.stop="test"
				disabled>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field> -->
			<!-- <u-field v-model="mobile" label="车辆颜色" placeholder="请输入车辆颜色" input-align='right' @click.stop="test"
				disabled>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field> -->
			<u-field v-model="queryForm.price" label="预估售价" placeholder="请填写出售价格" input-align='right'>
				<view slot='right'>
					<view style="display: flex;align-items: center;">
						<view style="color: #FF2828; margin-right: 10rpx;">万元</view>
						<image class="right-img" src="../../static/image/right.png" mode=""></image>
					</view>
				</view>
			</u-field>
			<view class="checked-input">
				<view class="label-input">
					车辆主图
				</view>
				<view class="check-box">
					<u-upload :custom-btn="true" ref="uUpload" max-count="1" :file-list='imgList' :action="imageAction">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="checked-input">
				<view class="label-input">
					车辆轮播图
				</view>
				<view class="check-box">
					<u-upload :custom-btn="true" ref="uUploads" :action="imageAction" :file-list='imagesList'>
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="checked-input" style="display: block;">
				<view class="label-input" style="margin-bottom: 20rpx;">
					详细描述
				</view>
				<view class="check-box">
					<textarea v-model="queryForm.detailText" cols="50" rows="50" placeholder="(可选填)" disabled @click="gotoEditor"></textarea>
				</view>
			</view>

		</view>
		<view class="cancat-person">
			<u-field v-model="queryForm.name" label="车主姓名" label-width='150' placeholder="请填写车主姓名" input-align='right'>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field>
			<u-field v-model="queryForm.phone" label="车主电话" label-width='150' placeholder="请填写车主电话" input-align='right'>
				<view slot='right'>
					<image class="right-img" src="../../static/image/right.png" mode=""></image>
				</view>
			</u-field>
		</view>
		<view class="submit-btn">
			<u-button shape="circle" :custom-style="customStyle" @click="submit">提交发布</u-button>
		</view>
	</view>
</template>

<script>
	import {
		releaseCar,
		updateCar,
		getCarDetail
	} from '@/api/index.js'
	export default {
		data() {
			return {
				imgList: [],
				imagesList: [],
				imageAction: 'https://afyc.chitong.cn/api/public/images/upload',
				addressShow: false,
				queryForm: {
					title: '',
					areaList: '',
					province: '',
					city: '',
					area: '',
					address: '',
					car_age: '',
					price: '',
					img: '',
					images: '',
					detail: '',
					detailText:'',
					name: '',
					phone: '',
					lng: '',
					lat: ''
				},
				customStyle: {
					color: '#fff',
					background: "#4286F4"
				},
				carId:null,
			}
		},
		onLoad(op) {
			if (op.carId) {
				this.carId = op.carId
				this.getCarDetail(op.carId)
			}
		},
		methods: {
			gotoEditor() {
				uni.navigateTo({
					url: '/pages/parseEditor/index'
				})
				uni.$on('getEdit', (res) => {
					this.queryForm.detail = res.detail
					this.queryForm.detailText = res.detailText
				})
			},
			getCarDetail(id) {
				getCarDetail(id).then(res => {
					this.queryForm = res.data
					this.queryForm.areaList = this.queryForm.province + this.queryForm.city + this.queryForm.area
					let img = 'https://afyc.chitong.cn/uploads/' + this.queryForm.img
					let imgForm = {
						url: img
					}
					this.imgList.push(imgForm)
					let images = JSON.parse(this.queryForm.images)
					let imagesForm = {}
					for (let key in images) {
						imagesForm[key] = images[key]
					}
					this.imagesList = Object.keys(imagesForm).map(val => ({
						url: 'https://afyc.chitong.cn/uploads/' + imagesForm[val]
					}))
					this.queryForm.biaoqian = this.queryForm.biaoqian.split(',')
					this.queryForm.biaoqian.forEach(item => {
						this.checkList.forEach(ele => {
							if (ele.name == item) {
								ele.checked = true
							}
						})
					})
			
				})
			},
			checkedThis(item) {
				item.checked = !item.checked
			},
			addressConfirm(e) {
				this.queryForm.areaList = e.province.label + e.city.label + e.area.label
				this.queryForm.province = e.province.label
				this.queryForm.city = e.city.label
				this.queryForm.area = e.area.label
			},
			// 显示选择器
			showSelect(label) {
				this[label] = true
			},
			// 处理上传图片回调
			handleImages() {
				let file = [];
				let files = [];
				file = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				files = this.$refs.uUploads.lists.filter(val => {
					return val.progress == 100;
				})
				if (file.length == 0) {
					uni.showToast({
						title: "请上传房屋主图",
						icon: 'none'
					})
					return
				} else {
					this.queryForm.img = file[0].response.data
				}
				if (files.length == 0) {
					uni.showToast({
						title: "请上传房屋轮播图",
						icon: 'none'
					})
					return
				} else {
					let arr = []
					files.forEach(item => {
						arr.push(item.response.data)
					})
					this.queryForm.images = JSON.stringify(arr) 
				}
			},
			// 提交表单
			submit() {
				if (this.queryForm.title == '') {
					this.$u.toast('请输入车辆名称');
					return
				}
				if (this.queryForm.areaList == '') {
					this.$u.toast('请选择地址');
					return
				}
				if (this.queryForm.address == '') {
					this.$u.toast('请填写详细地址');
					return
				}
				if (this.queryForm.name == '') {
					this.$u.toast('请填写车主');
					return
				}
				if (this.queryForm.phone == '') {
					this.$u.toast('请填写车主电话');
					return
				}
				if (this.carId == null) {
					this.handleImages()
					releaseCar(this.queryForm).then(res => {
						uni.showToast({
							title: '发布成功！',
							duration: 800
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
				} else {
					console.log(this.queryForm, '修改');
					updateCar(this.queryForm).then(res => {
						uni.showToast({
							title: '修改成功！',
							duration: 800
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/mine/index'
							})
						}, 1000)
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.slot-btn {
		width: 329rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	textarea {
		background-color: #F6F8F9;
		padding: 20rpx;
		width: 100%;
	}


	.release-body {
		background-color: #fff;
	}

	.right-img {
		width: 12rpx;
		height: 23rpx;
	}

	.checked-input {
		display: flex;
		padding: 20rpx 28rpx;
		border-bottom: 0.1rpx solid #e4e7ed;

		.label-input {
			width: 130rpx;
			margin-right: 50rpx;
			white-space: nowrap;
		}

		.check-box {
			display: flex;
			flex-wrap: wrap;

			>view {
				margin-right: 8rpx;
				color: #787878;
				border: 1rpx solid #787878;
				border-radius: 5rpx;
				font-size: 24rpx;
				padding: 5rpx;
				margin-bottom: 8rpx;
			}

			.is-checked {
				color: #fff;
				background-color: #4286F4;
				border: 1rpx solid #4286F4;
			}
		}
	}

	.top-tips {
		background-color: #F1F6FF;
		font-size: 22rpx;
		color: #4286F4;
		padding: 20rpx;
	}

	.cancat-person {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.submit-btn {
		// margin: 50rpx 0;
		margin: 0 auto;
		margin-top: 100rpx;
		padding-bottom: 100rpx;
		width: 90%;
	}
</style>